<template>
	<view class="page">
		<!-- 自定义导航 -->
		<uni-nav-bar :status-bar="true"
		left-icon="back" :border="false" @clickLeft="goBack">
		<view class="flex align-center justify-center w-100">
			<text class="font-md">提现</text>
			</view>
		</uni-nav-bar>
		<view class="banner-card">
			<text class="font">{{titleString}}</text>
			<text class="font-weight-bold h2">{{balanceNumber}}</text>
		</view>
		<view class="flex mx-6 flex-column align-start">
			<text class="font">提现到支付宝</text>
			<input type="number" v-model="drawalNumber" placeholder="请输入提现金额" class="flex-1 text-left my-2" style="min-height: 84upx;" />
			<text class="font-sm">提现最低金额100元</text>
		</view>
		<button type="primary" form-type="submit" class="submitBtn88 font py-1 bg-main mt-2" @click="drawalAction('success')">立即提现</button>
		<!-- 对话框 -->
		<uni-popup id="popupDialog" ref="popupDialog" type="dialog" @change="change">
			<uni-popup-dialogs :type="msgType" title="提现需要前往支付宝授权" rightText="去授权" :before-close="true" @confirm="dialogConfirm"
			 @close="dialogClose"></uni-popup-dialogs>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				drawalNumber:100,
				titleString: "余额（元）",
				balanceNumber: 3009.95,
				type: 'top',
				msgType: 'success',
				message: '这是一条成功消息提示',
				value: '默认输入的内容'
			}
		},
		onLoad(e) {

		},
		methods: {
			drawalAction(type) {
				this.msgType = type
				switch (type) {
					case 'success':
						this.message = '这是一条成功消息提示'
						break
					case 'warn':
						this.message = '这是一条警告消息提示'
						break
					case 'info':
						this.message = '这是一条消息提示'
						break
					case 'error':
						this.message = '这是一条错误消息提示'
						break
				}
				this.$refs.popupDialog.open()
			},
			/**
			 * 对话框点击确认按钮
			 */
			dialogConfirm(done) {
				console.log('点击确认');
				// 需要执行 done 才能关闭对话框
				done()
			},
			/**
			 * 对话框取消按钮
			 */
			dialogClose(done) {
				this.msgType = 'info'
				this.message = '点击了对话框的取消按钮'
				// 需要执行 done 才能关闭对话框
				done()
			},
			/**
			 * popup 状态发生变化触发
			 * @param {Object} e
			 */
			change(e) {
				console.log('popup ' + e.type + ' 状态', e.show)
			},
			// 返回上一步
			goBack(){
				uni.navigateBack({ delta: 1 });
			}
		},
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #FFFFFF;
		min-height: 100%;
		height: auto;
	}

	.uni-input-input {
		font-size: 60rpx;
	}

	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 24rpx;
		margin-top: 8rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.border-vertical {
		border-top-width: 1rpx;
		border-top-style: solid;
		border-top-color: #FFFFFF;
		border-bottom-style: solid;
		border-bottom-color: #FFFFFF;
	}
</style>
